import React, {Component} from 'react';
import {Image,StyleSheet,View,TouchableOpacity,Text} from 'react-native'
import {createBottomTabNavigator,createStackNavigator} from 'react-navigation';
import homeScreen from "./screen/homeScreen";
import discoverScreen from "./screen/discoverScreen";
import healthScreen from "./screen/healthScreen";
import cartScreen from "./screen/cartScreen";
import mineScreen from "./screen/mineScreen";
import categoryScreen from "./screen/categoryScreen";

const tabBarNav = createBottomTabNavigator({
    homeScreen:{
        screen:homeScreen,
        navigationOptions:{
            tabBarLabel:'首页',
            tabBarIcon:(({focused})=>{
                let image = focused ? require('../resource/tab/tab_home_selected.png'):require('../resource/tab/tab_home_default.png');
                return (
                    <Image source={image} resizeMode={'cover'} style={styles.iconStyle}/>
                )
            })
        }
    },
    discoverScreen:{
        screen:discoverScreen,
        navigationOptions:{
            tabBarLabel:'发现',
            tabBarIcon:(({focused})=>{
                let image = focused ? require('../resource/tab/tab_discovery_selected.png'):require('../resource/tab/tab_discovery_default.png');
                return (
                    <Image source={image} resizeMode={'cover'} style={styles.iconStyle}/>
                )
            })
        }
    },
    healthScreen:{
        screen:healthScreen,
        navigationOptions:{
            tabBarLabel:'健康',
            tabBarIcon:(({focused})=>{
                let image = focused ? require('../resource/tab/tab_health_selected.png'):require('../resource/tab/tab_health_default.png');
                return (
                    <Image source={image} resizeMode={'cover'} style={styles.iconStyle}/>
                )
            })
        }
    },
    cartScreen:{
        screen:cartScreen,
        navigationOptions:{
            tabBarLabel:'购物车',
            tabBarIcon:(({focused})=>{
                let image = focused ? require('../resource/tab/tab_car_selected.png'):require('../resource/tab/tab_car_default.png');
                return (
                    <Image source={image} resizeMode={'cover'} style={styles.iconStyle}/>
                )
            })
        }
    },
    mineScreen:{
        screen:mineScreen,
        navigationOptions:{
            tabBarLabel:'我的',
            tabBarIcon:(({focused})=>{
                let image = focused ? require('../resource/tab/tab_mine_selected.png'):require('../resource/tab/tab_mine_default.png');
                return (
                    <Image source={image} resizeMode={'cover'} style={styles.iconStyle}/>
                )
            })
        }
    }
},{
    initialRouteName:'homeScreen',
    tabBarOptions: {
        activeTintColor: '#e91e63',
        inactiveTintColor:'#666666',
        labelStyle: {
            fontSize: 12,
        },
    }
})
tabBarNav.navigationOptions = ({navigation})=>{
    let { routeName } = navigation.state.routes[navigation.state.index];
    let  title = routeName;
    let  header = null;
    switch (routeName){
        case 'homeScreen' :
            title = '首页';
            header = (
                <View style={styles.headerTitle}>
                    <TouchableOpacity
                        activeOpacity={0.5}
                        onPress={()=>{
                        navigation.navigate('categoryScreen');
                    }}
                    >
                        <Image source={require('../resource/home/nav_classify_char.png')} resizeMode={'contain'}
                               style={{width:30,height:30}}/>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.searchViewStyle}
                        activeOpacity={0.5}
                        onPress={()=>{
                            alert('搜索')
                        }}
                    >
                            <Image source={require('../resource/home/nav_search.png')}
                                   resizeMode={'contain'}
                                   style={{width:15, height: 15}}/>
                            <Text style={{fontSize:12,color:'#666666',paddingLeft:5}}>请输入搜索内容</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={0.5}
                        onPress={()=>{
                            alert('客服')
                        }}
                    >
                        <Image source={require('../resource/home/nav_message_char.png')} resizeMode={'contain'}
                               style={{width:30,height:30}}/>
                    </TouchableOpacity>
                 </View>

            );


            break;
        case 'discoverScreen':
            title = '发现';
            break;
        case 'healthScreen':
            title = '健康';
            break;
        case 'cartScreen':
            title = '购物车';
            break;
        case 'mineScreen':
            title = '我的';
            break;
    }
    return{
        headerTitle:header===null || header === undefined ? title : header,
        headerStyle:{
            backgroundColor:'white',
            borderBottomColor:'white'
        },

}


}
const styles = StyleSheet.create({
    iconStyle:{
        width:20,
        height:20
    },
    headerTitle:{
        flex:1,
        flexDirection:'row',
        height:44,
        justifyContent:'space-between',
        paddingHorizontal:15,
        alignItems:'center',
    },
    searchViewStyle:{
        flex:1,
        flexDirection:'row',
        justifyContent:'flex-start',
        alignItems:'center',
        paddingLeft:12,
        borderRadius:14,
        height:28,
        borderColor:'#E0E0E0',
        borderWidth:1,
        marginHorizontal:10
    }

})

const rootNav = createStackNavigator({
    tabBar:{screen:tabBarNav},
    categoryScreen:{screen:categoryScreen}
},{
    headerLayoutPreset:'center',
    navigationOptions:{
        headerBackImage:(
            <Image
                source={require('../resource/nav/nav_back_gray.png')}
                style={{width:44,height:44,marginLeft:15}}
            />
        ),
    }
})

export default rootNav;